<template>
  <div class="container">
    <a-split :style="{height: 'calc(100vh - 195px)'}" v-model:size="size" :min="0.22" :max="0.5">
      <template #first>
        <CustomTable :columns="leftColumns" :isOperation="false" isCreate ref="leftGroupListRef" titleIcon="icon-select-all" tableTitle="分组管理" :actions="leftActions" @onSelectRow="selectRow" defaultSelectedZeroRow :dialogConfig="groupDialogConfig" :isSearchBtnGroup="false" :isShowPagination="false">
          <template #operation="{ row }">
            <a-dropdown trigger="hover">
              <a-button type="text">更多
                <icon-down />
              </a-button>
              <template #content>
                <a-doption @click="leftGroupListRef.editHandler(row)" v-permission="'system.Config/edit'">编辑</a-doption>
                <a-doption @click="leftGroupListRef.deleEventCallback(row)" v-permission="'system.Config/del'">删除</a-doption>
              </template>
            </a-dropdown>
          </template>
        </CustomTable>
      </template>
      <template #second>
        <CustomTable ref="configListRef" :condition="cdns" :columns="cols" titleIcon="icon-settings" :actions="actions" :firstRefresh="false" :dialogConfig="configDialogConfig" :parentQuery="selectRowData" isCreate tableTitle="配置管理" />
      </template>
    </a-split>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from "vue";
import CustomTable from "@/components/custom-list/index.vue";
import {
  useConditions,
  useColumns,
  useActions,
  useGroupDialogConfig,
  useConfigDialogConfig,
  useLeftAction,
  useLeftColumns,
} from "./cfg";

export default defineComponent({
  path: "config", // 导航路由地址
  name: "Config",
  locale: "配置管理", // 导航名称
  permissions: [], // 权限数组
  components: { CustomTable },
  setup(props, ctx) {
    const cdns = useConditions();
    const cols = useColumns();
    const actions = useActions();
    const leftActions = useLeftAction();
    const leftColumns = useLeftColumns();
    const groupDialogConfig = useGroupDialogConfig();
    const configDialogConfig = useConfigDialogConfig();
    const selectRowData = ref({});
    const configListRef = ref();
    const leftGroupListRef = ref();
    const size = ref(0.22);
    let currentSelectedRow = "";
    //向custom-list内传入查询参数以及提交参数并刷新
    const selectRow = (row: { id: any; code: any }) => {
      if (currentSelectedRow === `${row.id}_select_id`) return;
      currentSelectedRow = `${row.id}_select_id`;
      selectRowData.value = {
        query: { field: "group_id", value: row.id },
        form: { field: "group_code", value: row.code },
      };
      configListRef.value.onRefresh();
    };

    return {
      cdns,
      cols,
      actions,
      size,
      selectRowData,
      groupDialogConfig,
      configDialogConfig,
      leftActions,
      leftColumns,
      selectRow,
      configListRef,
      leftGroupListRef,
    };
  },
});
</script>

<style></style>
